<template>
  <div>
    <!-- 面包屑导航区  -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 轮播图区域 -->
    <el-carousel
      :interval="3000"
      type="card"
      arrow="always"
      height="300px"
      autoplay
    >
      <el-carousel-item v-for="item1 in imagesList" :key="item1">
        <img :src="item1" />
      </el-carousel-item>
    </el-carousel>

    <!-- 卡片 -->
    <el-row :gutter="20">
      <el-col
        :xs="24"
        :sm="12"
        :md="6"
        v-for="item in cardList"
        :key="item.img"
      >
        <el-card :body-style="{ padding: '0px' }">
          <img :src="item.img" class="image" />
          <div style="padding: '14px'">
            <p>{{ item.title }}</p>
            <p>{{ item.message }}</p>
            <div class="bottom clearfix">
              <!-- <time class="time">{{ curentDate }}</time> -->
              <el-button type="text" class="button">操作按钮</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imagesList: [
        require("@/assets/images/2.jpg"),
        require("@/assets/images/3.jpg"),
        require("@/assets/images/4.jpg"),
        require("@/assets/images/5.jpg"),
        require("@/assets/images/6.jpg"),
        require("@/assets/images/7.jpg"),
      ],
      cardList: [
        {
          title: "江南芙蓉",
          message: "你不联系他，他就真的永远不会联系你",
          img: require("@/assets/images/card1.jpg"),
        },
        {
          title: "北漠女孩",
          message: "慈悲，是人类是最沉重的负担",
          img: require("@/assets/images/card2.jpg"),
        },
        {
          title: "北海鞠心",
          message: "面具的笑容，遮挡不了我的悲伤",
          img: require("@/assets/images/card3.jpg"),
        },
        {
          title: "流浪之女",
          message: "我依旧穿着嫁衣，在黑夜中寻找你的身影",
          img: require("@/assets/images/card4.jpg"),
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.el-carousel__item[data-v-d4b7673c] img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.el-carousel__item {
  border-radius: 30px;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
}
.el-col {
  height: 368px;
}
.el-card__body img {
  height: 186px;
}
.el-row {
  margin-top: 50px;
}
</style>
